<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>工具提示</title>
		<link href="css/bootstrap.min.css" rel="stylesheet" />
	</head>
	<body>
		<!--
			data-original-title 指定要显示的内容
		-->
		<div class="container">
			<p class="muted" style="margin-bottom: 0px;">
				<!--title="title" 将title 置为空 则 展示data-original-title
					data-placement 有四种展示方式 上 :top   下 : bottom   左 :left  右 :right
					data-animation="false" 默认为true 取消动画效果
				-->
				你好世界<a id="mytooltip" href="#" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="www.collmall.com" data-animation="false">卡 猫</a>,这是计算机的世界....
			</p>
		</div>
		<script type="text/javascript" src="js/jquery.min.js" ></script>
		<script type="text/javascript" src="js/bootstrap.min.js" ></script>
		<script type="text/javascript">
		/*
		  需要对其进行初始化 工具提示
		 */
		/*方法一*/
		$('[data-toggle="tooltip"]').tooltip();
		/*方法二*/
			//$("#mytooltip").tooltip("show");
		$("#mytooltip").tooltip("show");//直接展示
		/*
		 显示前 :show.bs.tooltip
		 显示后 :shown.bs.tooltip
		 隐藏前 :hide.bs.tooltip 
		 隐藏后 :hidden.bs.tooltip
		 显示前插入:inserted.bs.tooltip
		 * */
		$('#mytooltip').on('hidden.bs.tooltip', function () {
           alert("hello");
         })
		</script>
	</body>
</html>
